<template>
  <div class="page" :style="{backgroundColor: type === 1 ? 'rgb(40, 181, 121)' : 'rgb(80, 167, 156)'}">
    <div class="topBg">
      <img v-if="type === 1" src="https://zcgj-image.oss-cn-shenzhen.aliyuncs.com/activity1.jpg" alt="">
      <img v-else src="https://zcgj-image.oss-cn-shenzhen.aliyuncs.com/activity2.jpg" alt="">
    </div>
    <div class="flex-col section_6" :style="{height: type === 1 ? '410px' : '350px'}">
      <div class="flex-row group_6 justify-center">
        <div class="left-section"></div>
        <span class="text_5">登录信息进行报名</span>
        <div class="left-section"></div>
      </div>
      <div class="flex-col group_7">
        <div class="top-text-wrapper view_2">
          <div class="top-text-section">
            <el-input v-model="name" type="text" class="text_6 inputDeep" placeholder="请输入您的姓名"/>
          </div>
        </div>
        <div class="top-text-wrapper">
          <div class="top-text-section">
            <el-input v-model="phone" type="text" class="text_6 inputDeep" placeholder="请输入您的手机号码"/>
          </div>
        </div>
        <div class="top-text-wrapper">
          <div class="top-text-section">
            <el-input v-model="code" type="text" class="text_7 inputDeep" placeholder="请输入您的手机验证码"/>
            <el-button type="text" :disabled="!!time" 
						@click="getCode()">
						{{ !time ? `获取验证码` : `重新获取(${ time }s)` }}
					</el-button>
          </div>
        </div>
        <div v-if="type === 1" class="top-text-wrapper">
          <div class="top-text-section">
            <el-input v-model="companyName" type="text" class="text_6 inputDeep" placeholder="请输入您的公司名称(非必填)"/>
          </div>
        </div>
      </div>
      <div class="flex-col group_8">
        <div class="flex-col items-center button" @click="submit">
          提交
        </div>
        <div class="group_9">
          <span class="text_11"> * </span>
          <span class="text_12">提示：平台承诺您所提交的信息不会对外泄漏！</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { activitySignUp } from "@/api/front-home";
import { sendCode } from "@/api/user";

export default {
  name: 'sign',
  props: {
    type: {
		  default: 1,
		  type: Number
		},
  },
  components: {

  },
  data() {
    return {
      name: '',
      phone: '',
      code:'',
      companyName: '',
      time: 0,
      timeInterval: null,
      id:''
    }
  },
  computed: {},
  watch: {},
  methods: {
    submit() {
      if (!this.name) {
        this.$message.error("请输入您的姓名");
        return
      }
      if (!this.phone) {
        this.$message.error("请输入您的手机号码");
        return
      }
      if (!this.code) {
        this.$message.error("请输入手机验证码");
        return
      }

      activitySignUp({name: this.name, phone: this.phone, companyName: this.companyName, code: this.code, type: this.type}).then(response => { 
        this.id = response
        this.$message.success("报名成功");
        if (this.type === 2) {
          this.$emit('handleSign', this.id)
        }
      }).catch(error => {
        console.log(error);
      })
    },
    // 获取验证码
    getCode() {
      if (!this.phone) {
        this.$message.error('请输入手机号码')
        return
      }
      this.startGoing(60)
      const params = {
        mobile: this.phone,
        type: 9
      }
      sendCode(params).then(response => { 
        this.$message({
            message: '验证码已发送',
            type: 'success'
          })
      }).catch(error => {
        console.log(error);
      })
    },
    // 验证码倒计时
    startGoing(val) {
      if (this.timeInterval) return
      this.time = val
      this.timeInterval = setInterval(() => {
        this.time--
        if (this.time <= 0) {
          this.clearTimeFlow()
        }
      }, 1000)
    },
    // 清除
    clearTimeFlow() {
      clearInterval(this.timeInterval)
      this.time = 0
      this.timeInterval = null
    },
  },
  created() {
    
  },
  mounted() {
    
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang='scss' scoped>
@import "~@/styles/codeFun.scss";
  .page {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    position: relative;
    // background-color: rgb(40, 181, 121);
    
    .topBg {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .section_6 {
      padding: 26.5px 0 14px 0;
      background-color: rgb(255, 255, 255);
      box-shadow: 0px 6px rgba(0, 0, 0, 0.09);
      border-radius: 20px;
      position: absolute;
      top: 235px;
      left: 21.5px;
      right: 21.5px;
      height: 410px;
      // bottom: 37.5px;
      border: solid 2.5px rgb(0, 108, 92);
      .group_6 {
        color: rgb(0, 108, 92);
        font-size: 18px;
        line-height: 17px;
        white-space: nowrap;
        .left-section {
          align-self: center;
          background-color: rgb(0, 108, 92);
          width: 25px;
          height: 1px;
        }
        .text_5 {
          margin-left: 10px;
        }
      }
      .group_7 {
        position: relative;
        margin-top: 18.5px;
        color: rgb(210, 210, 210);
        font-size: 15px;
        line-height: 14px;
        white-space: nowrap;
        
        .top-text-wrapper {
          margin-top: 26px;
          width: 100%;

          .top-text-section {
            margin: 0 20px;
            padding: 0 10px;
            height: 38px;
            background-color: rgb(255, 255, 255);
            border-radius: 19px;
            border: solid 1px rgb(0, 108, 92);
          }


          .text_6 {
            width: 100%;
          }
          .text_7 {
            width: calc(100% - 80px);
          }
          ::v-deep .el-input__inner{
            border: 0;
          }
        }
        .view_2 {
          margin-top: 0;
        }
      }
      .group_8 {
        margin-top: 28px;
        .button {
          padding: 11.5px 0;
          align-self: center;
          color: rgb(255, 255, 255);
          font-size: 16px;
          line-height: 15.5px;
          white-space: nowrap;
          background-image: linear-gradient(-90deg, rgb(249, 64, 5) 0%, rgb(249, 91, 5) 100%);
          border-radius: 19px;
          width: 256px;
        }
        .group_9 {
          margin-left: 20px;
          margin-top: 13.5px;
          .text_11 {
            color: rgb(245, 14, 36);
            font-size: 13px;
            line-height: 23px;
          }
          .text_12 {
            color: rgb(117, 117, 117);
            font-size: 13px;
            line-height: 23px;
          }
        }
      }
    }
  }
</style>